<template>
  <div class="title">
    <div class="title_flex">
      <div style="margin-right: 10px;">
        <span class="title_name">{{ auditList.name }}</span>
      </div>
      <div class="text_store" :class="getCurrent(auditList.status).typeBut">
        {{getTitle(auditList.status)}}
      </div>
      <div v-if="auditList.rescindedContent" class="icon_bgc">{{auditList.rescindedContent}}</div>
    </div>
    <div style="margin-top: 10px;">
      <div class="title_flex">
        <span>{{ auditList.createByName }}</span>
        <div class="icon_bgc">{{ auditList.createCompanyName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GatherDataComponentsAuditAudit",
  props: ["rowTaskId"],
  watch: {
    rowTaskId: {
      handler(id) {
        if (id) {
          this.addAudit(id);
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      auditList: {},
    };
  },
  computed: {
    getCurrent() {
      return (type) => {
        if (type == 1 || type == 2 || type == 4) {
          return {
            typeBut: "typeBut1",
            icon: "el-icon-more",
            color: { color: " #496dff" },
            bgc: { "background-color": "#5a8bff" },
          };
        } else if (type == 3) {
          return {
            typeBut: "typeBut2",
            icon: "el-icon-check",
            color: { color: " #39ce78" },
            bgc: { "background-color": "#39ce78" },
          };
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return {
            typeBut: "typeBut3",
            icon: "el-icon-close",
            color: { color: " #fe5a57" },
            bgc: { "background-color": "#fe5a57" },
          };
        } else {
          return {};
        }
      };
    },
    // 审批状态文字
    getTitle() {
      return (type) => {
        if (type == 0) {
          return "";
        } else if (type == 2) {
          return "待审批";
        } else if (type == 3) {
          return "已完成";
        } else if (type == 6) {
          return "已驳回";
        } else if (type == 7) {
          return "已撤销";
        }
      };
    },
  },
  methods: {
    // 点击审核
    addAudit(id) {
      let params = {
        id: id,
        userId: this.$store.getters.userInfo.id,
      };
      this.$http.taskDetail(params).then(({ result }) => {
        this.auditList = result;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.title {
  margin-bottom: 20px;
  height: 60px;
}
.title_flex {
  display: flex;
  align-items: center;
}

.title_name {
  font-weight: 700;
  font-size: 20px;
}
.text_store {
  width: 82px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.icon_bgc {
  background: #f5f7fc;
  border: 1px solid #edf4ff;
  border-radius: 15px;
  padding: 5px 10px;
  margin-left: 10px;
}
.title_flex {
  display: flex;
  align-items: center;
}

.typeBut1 {
  color: #496dff;
  background: #f5f7fc;
  border: 1px solid #5a8bff;
  &:hover {
    background: #edf1fb;
  }
}
.typeBut2 {
  color: #39ce78;
  background: #f5fff9;
  border: 1px solid #39ce78;
  &:hover {
    background: #e7fbee;
  }
}
.typeBut3 {
  color: #fe5a57;
  background: #fff3f3;
  border: 1px solid #fe5a57;
  &:hover {
    background: #fbe6e6;
  }
}
</style>
